<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在线图片转文字、图片内文字识别工具</title>
</head>

<body style="margin-left: 20%">

<h3>在线图片转文字、图片内文字识别工具</h3>
<!--文件上传时method必须是post,enctype必须是multipart/form-data-->
<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" name="uploadFile" style="font-size: 20px" accept=".gif,.jpg,.png,.jpeg"/><br>
    <input type="button" id="uploadButton" value="上传要识别文字的图片" style="font-size: 20px;color: green">
</form>

<p style="color: red">
    上传图片大小不超过10M，格式 .gif,.jpg,.png,.jpeg，且图片内文字清晰宜辨认，超大图片先缩小截图再上传。<br>
    本工具识别准确率约为90%，由于需要消耗OCR资源，每天限制使用5次，如需要批量识别图片文字，请使用专业版。<br>
    用户上传的图片文件会在30分钟内自动删除，请你放心使用。<br>
</p>

<h3></h3>
<textarea style="width: 98%;height: 400px;display: block" id="doOCR_result">

</textarea>


<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#uploadButton").click(function () {
            /**
             *FormData是H5的一个模拟一个原始的表单格式的数据对象
             * 下面方式将form表单创建为FormData对象时，注意参数时DOM对象，而非JQuery对象
             * 具体用法可以查询FormData的使用
             * */
            var formData = new FormData($("#uploadForm")[0]);
            $("#doOCR_result").val("识别中......");
            /**
             *下面基本都是平时使用$.ajax的写法，只是data的值使用上面的formData对象
             * contentType：类容类型，默认: "application/x-www-form-urlencoded"),设置为false
             * processData：数据处理，默认为true,设置为false
             * */
            $.ajax({
                url: "/tess4j/doOCR",
                type: 'POST',
                data: formData,
                dataType: "JSON",
                contentType: false,
                processData: false,
                success: function (data) {
                    console.log(JSON.stringify(data));
                    // alert("上传成功：" + JSON.stringify(data));
                    if (data.code == 200) {
                        $("#doOCR_result").val("识别结果：" + data.data);
                    } else {
                        $("#doOCR_result").val(data.message);
                    }
                },
                error: function (data) {
                    console.log(JSON.stringify(data));
                    // alert("上传失败：" + JSON.stringify(data));
                    $("#doOCR_result").val(data);
                }
            });
        });
    });

</script>

</body>
</html>